<template>
    <div>
        <el-dialog title="添加栏目"  :visible.sync="visible" :show="show" @close="$emit('update:show', false)" class="tl size_13">
            <el-form :model="ruleForm"  center :rules="rules" ref="ruleForm">
                <el-form-item label="栏目标题" prop="title"  :label-width="formLabelWidth">
                    <el-col :span="6">
                        <el-input v-model="ruleForm.title" autocomplete="off" size="mini"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="上级栏目" :label-width="formLabelWidth" >
                    <el-col :span="12">
                        <el-cascader
                        :options="options"
                        :props="optionProps"
                        :show-all-levels="false"
                        v-model="op"
                        size="mini"
                        change-on-select
                        style="width:250px"
                        :placeholder="placeText"
                        @change="handleItemChange"
                        ></el-cascader>
                    </el-col>
                </el-form-item>
                <el-form-item label="图标样式" :label-width="formLabelWidth" >
                     <el-col :span="6">
                         <el-input v-model="piclinks" autocomplete="off" size="mini"></el-input>
                    </el-col>
                </el-form-item> 
                <el-form-item label="链接地址" :label-width="formLabelWidth">
                    <el-col :span="12">
                        <el-input v-model="ruleForm.url" placeholder="请输入栏目地址" autocomplete="off" size="mini"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item class="tc bor_top pd_top_10">
                    <el-button  :loading='$store.state.isLoading' type="primary" @click="addMenu('ruleForm')"  size="mini" v-loading="loading">立即提交</el-button>
                    <el-button  :loading='$store.state.isLoading' @click="resetForm('ruleForm')" size="mini">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {

    data(){
        return{
            loading:false,
            placeText:"添加上级栏目,不选择默认为一级",
            visible:this.show,   
            optionProps:{
                value:'id',
                label:'title',
                children: 'z'
            },         
            op:[],
            piclinks:'',
            ruleForm: {
                title:"",
                parent_id: "0",
                url: "",
                piclink:"",
            },         
              
            formLabelWidth: '120px',
            options: [],
            rules:{
                title:[
                    { required: true, message: '请输入栏目标题', trigger: 'blur' },
                ],
            },
            parentNode:"",
        }
        
    },
    props:{
        show:Boolean,
        ob:{
            title:String,
            parent_id:String,
            url:String,
            id:String,
            piclink:String,
        },
        ad:String
    },
    watch:{
        show (){
            this.visible = this.show;
        },
        getMenu(val){
            this.options=val;
        },
        ob(val){
            this.op=[];
            this.ruleForm=val;
            this.piclinks=val.piclink.slice(6);
            this.placeText=val.parent_title;
            val.up_id="0@"+val.up_id;
            this.op=(val.up_id.split("@"));
        },
        piclinks(val){
            this.ruleForm.piclink="fa fa-"+val;
        },
        ad(){
            this.ruleForm.title="";
            this.ruleForm.parent_id="0";
            this.ruleForm.url="";
            this.ruleForm.id="";
            this.ruleForm.piclink="";
            this.placeText="";
        }
        
    },
    methods:{
        handleItemChange(val) {
            this.ruleForm.parent_id = (val[val.length - 1]);
        },
        addMenu(ruleForm){
             this.$refs[ruleForm].validate((valid) => {
                if (valid) {       
                    if(this.ad == "添加"){

                        console.log(this.ruleForm)
                        this.add(this.ruleForm);
                    }else{
                        this.ruleForm.id=this.ob.id;
                        this.$api.getMenu.updateMenuSave(this.ruleForm).then(res=>{
                            if(res.data.code == 200){
                                this.$fnc.alertSuccess({text:"修改成功！"});
                                this.visible=false;
                            }
                            this.$store.dispatch('getMenu')
                            
                        })
                    }
                    
                } else {
                    this.$message.error("请补充完整信息！")
                    return false;
                }
            });
        },
        add(data){
            this.loading=true;
            this.$api.getMenu.addMenuList(data).then(res=>{
                console.log(data)
                if(res.data.code == 200){
                    this.$fnc.alertSuccess("添加成功");
                    this.resetForm('ruleForm');
                    this.visible=false;
                }
                this.$store.dispatch('getMenu')
            })
            this.loading=false;
        },
        resetForm(formName){
             this.$refs[formName].resetFields();
             this.op=[];
        },
    },
    computed:{
        getMenu(){
            return this.$store.state.menuList;
        }
    }
}
</script>
